<template>
    <div id='Login' :style="{height:screenHeight}">
        <!--this is Login html! ~
        <button type="" @click='Login_in'>Login in</button>
        <button type="" @click='sign_up'>Sign up</button>-->
        <div class="login-img">
            <img src="~assets/Miku.jpg" alt="">
        </div>
        <div class="login-body">
            <div class="input-txt">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" maxLength="20" placeholder="请输入用户名">
            </div>
            <div class="input-txt">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" maxLength="16" placeholder="请输入密码">
                <span @click="toggle_pwd_show"><i :class="iconEye"></i></span>
            </div>
            <div  @click="Login_in">
                <mt-button type="danger" class="signin-btn">登录</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
    import { Button,Spinner } from 'mint-ui';
    // import 'mint-ui/lib/button/style.css';
    export default{
        data:function(){    
            return{
                screenHeight:screen.height + "px",
                toggle:"false",
                iconEye:"icon-eye-open"
            }
        },
        methods:{
            Login_in(){
                this.$http.get('./static/data.json').then((data)=>{
                     console.log(data);
                     setTimeout(()=>{
                         // 将用户名和密码存在本地之后路由到主界面 main
                         
                         this.$router.push('Main');
                     },1000)                   
                },(data) =>{
                    if(data.status == 404 ){
                        console.log(data.statusText,data.body);
                    }
                })
            },
            sign_up(){
                this.$router.push('Main');
            },
            toggle_pwd_show(){
                var pwd=document.getElementById('password');
                pwd.getAttribute('type');
                this.toggle=!this.toggle;
                this.iconEye=this.toggle?"icon-eye-open":"icon-eye-close";
                var type=this.toggle?"password":"text";
                pwd.setAttribute('type',type);
            },
            showaaa(){
                this.emit('sign_up');
            }
        },
        components:{
            mtButton:Button,
            mtSpinner:Spinner,
        }
    }
</script>
<style lang="scss" scoped>
    /* Login.vue */
    @import "../assets/css/function.scss";
    #Login{
        text-align:center;
        height:pxToRem(568px);
        background-color:#fff;
        .login-img{
            position:relative;
            top:pxToRem(30px);
            img{
                width:pxToRem(300px);
                height:pxToRem(200px);
            }
        }
        .login-body{
            position: absolute;
            width:14.8rem;
            top:12rem;
            left:0.6rem;
            .input-txt{
                padding:0.5rem 0;
                text-align:left;
                font-size:0.7rem;
                border-bottom:1px solid #eee;
                label{
                    color:#888;
                    display:inline-block;
                    width:4em;
                    margin:0 0.5rem; 
                }
                span{
                    float:right;
                    margin-right:pxToRem(10px);
                    .icon-eye-open{
                        color:#888;
                    }
                    .icon-eye-close{
                        color:#888;
                    }
                }
                input{
                    color:#666;
                    font-size:0.6rem;
                    border:none;
                    outline:none;
                    background:rgba(255,255,255,0.1);
                }
                input:-webkit-autofill{
                    -webkit-box-shadow: 0 0 0px 1000px white inset;
                        background-color: white;
                }
            }
            .signin-btn{
                width:14.8rem;
                height:pxToRem(32px);
                margin-top:pxToRem(20px);
                background-color:rgb(191,24,31);
                border:none;
                border-radius:pxToRem(4px);
                color:#fff;
                font-size:pxToRem(12px);
            }
        }
    }
</style>
<style src='mint-ui/lib/button/style.css'></style>